<template>
  <div class="log-box">
    <div class="log-item" v-for="(item, index) in props.logList" :key="index">
      <div class="item-content">
        <div class="item-dot">
          <div class="dot"></div>
        </div>
        <div class="item-title">{{ item.name }}</div>
      </div>

      <div class="item-date">{{ item.time }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
const props = defineProps<{ logList: any[] }>();
</script>
<style lang="less" scoped>
.log-box {
  width: 276px;
  height: 192px;
  background: #f2f3f5;
  border-radius: 8px;
  padding: 12px;
  overflow-y: auto;
  .log-item {
    display: flex;
    align-items: center;
    position: relative;
    padding-bottom: 24px;
    justify-content: space-between;
    .item-content {
      display: flex;
      align-items: center;
      .item-dot {
        width: 12px;
        height: 12px;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 1px solid #bec4ca;
        margin-right: 8px;
        .dot {
          width: 6px;
          height: 6px;
          background: #bec4ca;
          border-radius: 50%;
        }
      }
      .item-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #262626;
        line-height: 16px;
        text-align: left;
        font-style: normal;
      }
    }

    .item-date {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #8c8c8c;
      line-height: 16px;
      text-align: center;
      font-style: normal;
    }
    &::after {
      position: absolute;
      left: 6px;
      bottom: 3px;
      content: "";
      width: 1px;
      height: 20px;
      background: #bec4ca;
    }
    &:nth-child(1) {
      .item-dot {
        border: 1px solid #2776ff;
        .dot {
          background: #2776ff;
        }
      }
      &::after {
        background: #2776ff;
      }
    }
    &:last-child {
      padding-bottom: 0;
      &::after {
        display: none;
      }
    }
  }
}
</style>
